const markdownit = require('markdown-it');
const anchor = require('markdown-it-anchor');
const container = require('markdown-it-container');
const matter = require('gray-matter');
const hljs = require('highlight.js');

const md = markdownit({
    html: true,
    linkify: true,
    typographer: true,
    highlight: (str, lang) => {
        if(lang && hljs.getLanguage(lang)){
            try{
                const html = hljs.highlight(str, {language: lang}).value;
                return html;
            }catch(_){}
        }
        return ''
    }
})

md.renderer.rules.fence = (tokens, idx, options, env, self) => {
    const originContent = tokens[idx].content;
    let content = originContent;
    const lang = tokens[idx].info;
    if(lang && hljs.getLanguage(lang)){
        try{
            content = hljs.highlight(content, {language: lang}).value;
        }catch(_){}
    }
    return `
<div class="k-code-block">
    <div class="code-header">
        <span class="code-lang">${lang}</span>
        <a class="copy-btn" data-copy-text="${encodeURIComponent(originContent)}">复制</a>
    </div>
    <pre><code class="${options.langPrefix}${lang}">${content}</code></pre>
</div>    
    `
}

md.use(anchor);
md.use(container, 'info', {
    validate: params => params.trim().match(/^info\s*(.*)$/),
    render: (tokens, idx) => {
        return tokens[idx].nesting === 1 ? `<el-alert style="margin-bottom:15px" title="信息" type="info" show-icon :closable="false">` : `</el-alert>`
    }
})
md.use(container, 'tip', {
    validate: params => params.trim().match(/^tip\s*(.*)$/),
    render: (tokens, idx) => {
        return tokens[idx].nesting === 1 ? `<el-alert style="margin-bottom:15px" title="提示" type="success" show-icon :closable="false">` : `</el-alert>`
    }
})
md.use(container, 'warning', {
    validate: params => params.trim().match(/^warning\s*(.*)$/),
    render: (tokens, idx) => {
        return tokens[idx].nesting === 1 ? `<el-alert style="margin-bottom:15px" title="注意" type="warning" show-icon :closable="false">` : `</el-alert>`
    }
})
md.use(container, 'danger', {
    validate: params => params.trim().match(/^danger\s*(.*)$/),
    render: (tokens, idx) => {
        return tokens[idx].nesting === 1 ? `<el-alert style="margin-bottom:15px" title="危险" type="error" show-icon :closable="false">` : `</el-alert>`
    }
})

module.exports = function(source) {
    const {content} = matter(source);
    const html = md.render(content);
    return `
<template>
    <div class="markdown-body">
        ${html}
    </div>
</template>
<script>
export default {
    name: 'MarkdownComponent'
}
</script>
<style>
@import 'github-markdown-css/github-markdown-light.css';
@import 'highlight.js/styles/vs2015.min.css';

.markdown-body {
    padding:20px 40px;
}

.markdown-body h1 {
    font-weight: 600;
    padding-bottom: .3em;
    font-size: 1.5em;
    border-bottom: 1px solid #d1d9e0b3;
}

.markdown-body h2 {
    font-weight: 600;
    font-size: 1.25em;
}

.markdown-body h3 {
    font-weight: 600;
    font-size: 1em;
}

.markdown-body h4 {
    font-weight: 600;
    font-size: .875em;
}

.markdown-body h5 {
    font-weight: 600;
    font-size: .85em;
    color: #59636e;
}

.markdown-body pre {
    color: #f0f6fc;
    background-color: #151b23;
}

.k-code-block {
    border-radius: 5px;
    overflow: hidden;
}
.k-code-block .code-header {
    color: #fff;
    background-color: rgb(32,33,35);
    font-size: 0.75rem;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
}

.k-code-block .code-lang {
    color: #fff;
    font-size: 15px;
}

.k-code-block .copy-btn {
    cursor: pointer;
}

.k-code-block pre {
    margin-top: 0px;
    border-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.md-container-info {
    padding: 10px;
    line-height: 26px;
    background-color: #ffede5;
    border-left: 4px solid #ff4d00;
    border-radius: 4px;
    color: #515151;
    margin-bottom: 1rem;
}

.md-container-info p {
    margin: 0px;
}

</style>
    `
}